const styleKeys = [
    'width', 'height', 'fontSize', 'left', 'top',
    'bottom', 'right', 'paddingLeft', 'paddingRight',
    'paddingTop', 'paddingBottom', 'marginTop', 'marginBottom',
    'marginLeft', 'marginRight',
];
export default {
    filters: {
        style(val) {
            if(val.style) {
                const targetStyle = {};
                const targetStyleKeys = Object.keys(val.style);
                const transform = [];
                let transformOrigin = ['50%', '50%'];
                targetStyleKeys.forEach(vo => {
                    const unit = styleKeys.includes(vo) ? 'px' : '';
                    if (['rotateX', 'skewX', 'skewY', 'rotateY', 'rotateZ'].includes(vo)) {
                        transform.push(vo + '(' + val.style[vo] + 'deg)');
                    } else if (['translateZ'].includes(vo)) {
                        transform.push(vo + '(' + val.style[vo] + 'px)');
                    } else if (['transformOriginX', 'transformOriginY'].includes(vo)) {
                        if (vo === 'transformOriginX') {
                            transformOrigin[0] = `${val.style[vo]}%`;
                        }
                        if (vo === 'transformOriginY') {
                            transformOrigin[1] = `${val.style[vo]}%`;
                        }
                    } else if (vo === 'filterArray') {
                        const filterArray = val.style[vo] || [];
                        console.log('filter array==>', filterArray);
                        const filters = filterArray.map(filter => {
                            const { name, value }  = filter;
                            if (name === 'blur') {
                                return `blur(${value}px)`;
                            } else if (['brightness', 'contrast', 'grayscale', 'invert', 'saturate', 'sepia'].includes(name)) {
                                return `${name}(${value}%)`;
                            } else if ('hue-rotate' === name) {
                                return `hue-rotate(${value}deg)`;
                            } else if ('drop-shadow' === name) {
                                return `drop-shadow(${value[0] || 0}px ${value[1] || 0}px ${value[2] || 0}px ${value[4]})`;
                            }
                        });
                        targetStyle['filter'] = filters.join(' ');
                    } else {
                        if (vo === 'height' && val.style[vo] === 'auto') {
                            targetStyle[vo] = val.style[vo];
                        } else {
                            targetStyle[vo] = val.style[vo] + unit;
                        }
                    }
                });
                if (transform.length > 0) {
                    targetStyle['transform'] = transform.join(' ');
                }
                targetStyle['transformOrigin'] = transformOrigin.join(' ');
                return targetStyle;
            }
            return {};
        }
    }
}